<!-- 新建供应商 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" :title="vdata.isAdd ? '新增供应商' : '修改供应商'" width="40%">
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :rules="vdata.rules"
      :colon="false"
      :wrapper-col="{ span: 24 }"
      style="margin-top: 30px; margin-left: 20px"
    >
      <a-row>
        <a-col :span="11">
          <a-form-item label="供应商名称" name="supplierName">
            <a-input v-model:value="vdata.saveObject['supplierName']" placeholder="供应商名称" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="通信认证参数配置" name="authConfig" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['authConfig']" :placeholder="vdata.saveObject['authConfigPlaceholder']" :rows="4" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="供应商网址" name="websiteUrl">
            <a-input v-model:value="vdata.saveObject['websiteUrl']" placeholder="供应商网址" />
          </a-form-item>
        </a-col>
        <a-col :push="1" :span="11">
          <a-form-item label="状态" name="state">
            <a-select v-model:value="vdata.saveObject['state']" :placeholder="'状态'">
              <a-select-option :value="0">取消合作</a-select-option>
              <a-select-option :value="1">正常合作</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="网址登录用户名" name="username">
            <a-input v-model:value="vdata.saveObject['username']" placeholder="供应商网址" />
          </a-form-item>
        </a-col>
        <a-col :push="1" :span="11">
          <a-form-item label="网址登录用户名密码" name="password">
            <a-input v-model:value="vdata.saveObject['password']" :placeholder="vdata.saveObject['passwordPlaceholder']" />  
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>
  
  <script setup lang="ts">
  import { req,API_URL_VIRTUAGOODS_SUPPLIER_ADD,API_URL_VIRTUAGOODS_SUPPLIER_UPDATE } from '@/api/manage'
  import {$apiAwardVirtualSupplierAdd,$apiAwardVirtualSupplierUpdate} from '@/api/externalGoods/supplier/index'
  import { reactive, ref, defineExpose, getCurrentInstance } from 'vue'
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  const formRef = ref()
  
  const props = defineProps(['callBackFunc'])
  
  const vdata:any = reactive({
    isAdd: false, // 新增OR修改
    visible: false,
    btnLoading: true,
    saveObject: {},
    rules: {
      supplierName: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' },],
      authConfig: [{ required: true, message: '通信认证参数不能为空', trigger: 'blur' },],
      websiteUrl: [{ required: true, message: '供应商网址不能为空', trigger: 'blur' },],
      state: [{ required: true, message: '请选择状态', trigger: 'change' },],
      username: [{ required: true, message: '网址登录用户名不能为空', trigger: 'blur' },],
      password: [{ required: true, message: '网址登录密码不能为空', trigger: 'blur' },],
    },
  })
  
  function handleOkFunc() {
    formRef.value.validate().then(() => {
      vdata.btnLoading = true
      if(vdata.isAdd){  // 新增
        
        $apiAwardVirtualSupplierAdd(vdata.saveObject).then(res=>{
          $infoBox.message.success('新增成功！')
          props.callBackFunc()
          onClose()
        }).finally(()=>{
          vdata.btnLoading = false
        })
      }else{  // 修改
        $apiAwardVirtualSupplierUpdate({ ...vdata.saveObject }).then(res=>{
          $infoBox.message.success('修改成功！')
          props.callBackFunc()
          onClose()
        }).finally(()=>{
          vdata.btnLoading = false
        })
      }
    }).catch(() => {})
  }
  
  function onClose() {
    vdata.visible = false
  }
  
  function show(record) {
    vdata.isAdd = !record
    vdata.btnLoading = false
    vdata.saveObject = {}
    if (formRef.value !== undefined) {
      formRef.value.resetFields()
    }

    if(!vdata.isAdd){ // 修改
      vdata.saveObject = { ...record, authConfigPlaceholder: record.authConfig, authConfig: null,passwordPlaceholder:record.password,password:null }
      vdata.rules.authConfig = [{required:false}]
      vdata.rules.password = [{required:false}]
    }else{
      vdata.saveObject.authConfigPlaceholder='请输入通信认证参数配置'
      vdata.saveObject.passwordPlaceholder='请输入网址登录用户名密码'
    }
    vdata.visible = true
  }
  
  defineExpose({
    show,
  })
  </script>